<template>
    <u-popup :show="show" mode="bottom" @close="$emit('update:show', false)" :closeable="true" :safeAreaInsetBottom="true" round="15">
        <view class="virtual-asset-popup">
            <view class="popup-header"><text class="popup-title">虚拟资产</text></view>
            <view class="asset-options">
                <view class="asset-option" v-if="pointsShow" :class="[(!localAssets || localAssets.points == 0) ? 'no-click' : '']" @click="selected='points'">
                    <view class="asset-left">
                        <view class="asset-icon"><span class="iconfont icon-jifenduihuan"></span></view>
                        <view class="asset-info">
                            <text class="asset-name">积分</text>
                            <text class="asset-desc">当前积分: {{ localAssets ? localAssets.points : 0 }}, 可打0折</text>
                        </view>
                    </view>
                    <view class="asset-right">
                        <view class="radio-btn" :class="{ 'selected': selected==='points' }">
                            <u-icon v-if="selected==='points'" name="checkmark" size="12" color="#FFFFFF"></u-icon>
                        </view>
                    </view>
                </view>
                <view class="asset-option" v-if="warmCoreShow" :class="[(!localAssets || localAssets.warm_core == 0) ? 'no-click' : '']" @click="selected='warmCore'">
                    <view class="asset-left">
                        <view class="asset-icon"><image class="asset-icon-img" :src="IMAGE_URL + '/static/order/icon.png'" mode="aspectFill" style="width: 32rpx; height: 32rpx;"></image></view>
                        <view class="asset-info">
                            <text class="asset-name">暖芯值</text>
                            <text class="asset-desc">当前暖芯值: {{ localAssets ? localAssets.warm_core : 0 }}, 可抵扣¥{{ localAssets ? localAssets.warm_core : 0 }}</text>
                        </view>
                    </view>
                    <view class="asset-right">
                        <view class="radio-btn" :class="{ 'selected': selected==='warmCore' }">
                            <u-icon v-if="selected==='warmCore'" name="checkmark" size="12" color="#FFFFFF"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
            <view class="popup-footer"><view class="confirm-btn" @click="confirm">确定</view></view>
        </view>
    </u-popup>
</template>
<script>
import { getHousekeepMenmberAssets } from '@/api/index.js'
import appConfig from '@/config/app.js'
export default {
    name: 'VirtualAssetPopup',
    props: {
        show: { type: Boolean, default: false },
        assets: { type: Object, default: null },
        defaultSelected: { type: String, default: '' },
        pointsShow: { type: Boolean, default: true },
        warmCoreShow: { type: Boolean, default: true },
    },
    data() {
        return { 
            IMAGE_URL: appConfig.IMAGE_URL,
            selected: this.defaultSelected,
            localAssets: this.assets || { points: 0, warm_core: 0 },
            loadingAssets: false
        }
    },
    watch: {
        show(val) { if (val) { this.selected = this.defaultSelected; this.ensureAssets() } },
        assets: {
            handler(n) { if (n) { this.localAssets = n } },
            deep: true
        }
    },
    methods: {
        async ensureAssets() {
            if (this.assets && (typeof this.assets.points !== 'undefined')) {
                this.localAssets = this.assets
                this.$emit('assetsReady', this.localAssets)
                return
            }
            if (this.loadingAssets) return
            this.loadingAssets = true
            try {
                const res = await getHousekeepMenmberAssets()
                if (res && res.errno === 0 && res.data) {
                    this.localAssets = res.data
                } else {
                    this.localAssets = { points: 0, warm_core: 0 }
                }
            } catch (e) {
                this.localAssets = { points: 0, warm_core: 0 }
            } finally {
                this.loadingAssets = false
                this.$emit('assetsReady', this.localAssets)
            }
        },
        confirm() {
            if (!this.selected) return this.$emit('update:show', false)
            this.$emit('confirm', this.selected, this.localAssets)
            this.$emit('update:show', false)
        }
    }
}
</script>
<style lang="scss" scoped>
.virtual-asset-popup { padding: 32rpx; display:flex; flex-direction:column; height:100%; }
.popup-header { display:flex; justify-content:center; align-items:center; margin-bottom: 28rpx; }
.popup-title { font-size: 32rpx; font-weight: 600; color:#333; }
.asset-options { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.asset-option { display:flex; justify-content:space-between; align-items:center; padding:28rpx 0; border-bottom:1rpx solid #DDDDDD; }
.asset-option.no-click { pointer-events:none; opacity:.5; }
.asset-left { display:flex; gap:10rpx; }
.asset-icon span { font-size:32rpx; color:#df9824; }
.asset-info { display:flex; flex-direction:column; }
.asset-name { font-size:28rpx; color:#333; font-weight:600; }
.asset-desc { font-size:24rpx; color:#999; margin-top:4rpx; }
.asset-right { display:flex; align-items:center; gap:16rpx; }
.radio-btn { width:24rpx; height:24rpx; border-radius:50%; border:1rpx solid #999; display:flex; align-items:center; justify-content:center; background:#fff; }
.radio-btn.selected { border-color:#0785CF; background:#0785CF; }
.popup-footer { display:flex; justify-content:center; padding-top: 28rpx; }
.confirm-btn { width:100%; height:80rpx; background:linear-gradient(90deg,#0785CF 0%,#25A4EF 100%); box-shadow:0 4rpx 20rpx rgba(7,133,207,0.1); border-radius:40rpx; display:flex; align-items:center; justify-content:center; font-size:32rpx; color:#fff; font-weight:600; }
</style>
